<template>
	<view class="content">
		<view class="component-box">
			<view class="item" @tap="activeTab(0)">
				<i class="iconfont iconkemuguanli before" :class="[tabSwitch == 0 ? 'active-before' : '']"></i>
				<view class="item-title" :class="[tabSwitch == 0 ? 'active-item-title' : '']">{{leftNavExhibition}}</view>
				<i class="iconfont iconjiantou icon-styl" :class="[tabSwitch == 0 ? 'active-icon-styl' : '']"></i>
			</view>
			<view class="item" @tap="activeTab(1)">
				<i class="iconfont iconzhuangtaiguanli before" :class="[tabSwitch == 1 ? 'active-before' : '']"></i>
				<view class="item-title" :class="[tabSwitch == 1 ? 'active-item-title' : '']">{{rightNavExhibition}}</view>
				<i class="iconfont iconjiantou icon-styl" :class="[tabSwitch == 1 ? 'active-icon-styl' : '']"></i>
			</view>
		</view>
		<scroll-view scroll-y="true" class='pop-bg' catchtouchmove="false" v-if="con1Switch" @tap.stop="closeAll">
			<view class="bg-con1" v-for="(item, index) in subjectList" :key="index" @tap="changeSubject(item.subject_name, item.sid, index)">
				<view class="opi-styl" :class="[currectSubject === index ? 'active-opi-styl' : '']">{{item.subject_name}}</view>
				<i class="iconfont gougou-styl" :class="[currectSubject === index ? 'iconduigou' : '']"></i>
			</view>
		</scroll-view>
		<view class='pop-bg' catchtouchmove="false" v-if="con2Switch" @tap.stop="closeAll">
			<view class="bg-con1" v-for="(item, index) in correctStatusList" :key="index" @tap="changeCurrectStatus(item.title,item.status,index)">
				<view class="opi-styl" :class="[correctStatus == index ? 'active-opi-styl' : '']">{{item.title}}</view>
				<i class="iconfont gougou-styl" :class="[correctStatus == index ? 'iconduigou' : '']"></i>
			</view>
		</view>
		<view class="empty" v-if="mockList.length == 0">
			<i class="iconfont iconmeishuju"></i>
			<view class="empty_text">暂无内容</view>
		</view>
		<scroll-view class="scroll_content" scroll-y v-else>
			<block v-for="(item, index) in mockList" :key="index">
				<view class="package" :class="['which_status', item.correct_state == 1 ? 'which_status_type1' : item.correct_state == 2 ? 'which_status_type2' : item.correct_state == 3 ? 'which_status_type4' : 'which_status_type3']">
					<view class="grid_item cont_center">
						<view class="grid_r1">
							<text>{{item.name}}</text>
							<view class="abridge">{{item.subject_name}}</view>
							<view class="medal-wrap">
								<text class="iconfont iconsududiyi speed" v-if="item.is_first"></text>
								<text class="iconfont iconfenshudiyi greater" v-if="item.is_top_score"></text>
							</view>
						</view>
						<view class="grid_r2">开始时间：{{item.start_time}}</view>
						<view class="grid_r2">截止时间：{{item.end_time}}</view>
						<view class="grid_r5" v-if="item.type != 4 && item.correct_state === 2">
							<navigator hover-class="none" :url="'../task/all?pagetype=correct&is_exam_type=' + is_exam_type + '&type=' + type + '&class_log_id=' + item.class_log_id"><view class='btn_item btn_analyse'>试题解析</view></navigator>
							<navigator hover-class="none" :url="'../task/all?pagetype=error&is_exam_type=' + is_exam_type + '&type=' + type + '&class_log_id=' + item.class_log_id"><view class='btn_item btn_error'>查看错题</view></navigator>
							<navigator hover-class="none" :url="'../child/practise_report?is_exam_type=' + is_exam_type + '&type=' + type + '&class_log_id=' + item.class_log_id"><view class='btn_item btn_report'>{{reportName}}</view></navigator>
						</view>
						<view class="grid_r5 finish" v-if="item.type == 4 && item.correct_state === 2">已完成</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<uni-load-more v-if="mockList.length >= 4" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				subjectList: [],
				correctStatusList: [],
				leftNavExhibition: '全部科目',
				rightNavExhibition: '全部状态',
				currectSubject: 0,
				correctStatus: 0,
				con1Switch: false,
				con2Switch: false,
				tabSwitch: 999,
				mockList: [],
				groupid: '',
				sid: '',
				student_id: 0,
				type: '',
				is_exam_type: '',	// 1作业，2为试卷
				correct_state: ''	,// 暂定9为不做筛选
				status: 'more',
				reload: true,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				page: 1,
				reportName: '练习报告'
			}
		},
		components: {
			uniLoadMore
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.requData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function(){
				_this.requData();
			},500);
		},
		onLoad(e) {
			this.student_id = uni.getStorageSync("currentChild").student_id
			this.is_exam_type = e.is_exam_type	// '考试'或'作业'列表
			this.groupid = e.groupid
			this.type = e.type
			
			if(this.type == 4) {
				this.correctStatusList = [
					{title: "全部状态", status: ''},
					{title: "未完成", status: '0'},
					{title: "已完成", status: '2'},
					{title: "已超时", status: '3'}
				]
			} else {
				this.correctStatusList = [
					{title: "全部状态", status: ''},
					{title: "未完成", status: '0'},
					{title: "未批改", status: '1'},
					{title: "已完成", status: '2'},
					{title: "已超时", status: '3'}
				]
			}
			
			let title = ''
			if(e.is_exam_type === '1'){
				switch (e.type){
					case '1':
						title = '随堂练习',
						this.reportName = '练习报告';
						break
					case '2':
						title = '课前作业'
						this.reportName = '作业报告';
						break
					case '3':
						title = '课后作业'
						this.reportName = '作业报告';
						break
					case '4':
						title = '预习作业'
						this.reportName = '预习报告';
						break
				}
			} else {
				title = '班级考试'
				this.reportName = '考试报告';
			}
			
			uni.setNavigationBarTitle({
				title: title
			})
			
			// 获取科目列表
			// 文档：http://lz.25002.cn/msmcenter_api/index.php?act=api&tag=9#info_api_b1d10e7bafa4421218a51b1e1f1b0ba2
			this.$zapi.apiPost('user/subject.Lists/subjectLists', {
				student_id: this.student_id
			}).then(res => {
				this.subjectList = res.data.data
				// 科目数组前 push一个全部科目
				if(this.subjectList != null) {
					this.subjectList.unshift({
						subject_name: "全部科目",
						sid: ''
					})
				}
			})
			// 获取练习列表
			this.requData()
		},
		methods: {
			requData() {
				let data = {
					"student_id": this.student_id,
					"groupid": this.groupid,
					"is_exam_type": this.is_exam_type,
					"pagesize": 6,
					"page": this.page
				}
				if(!!this.type){
					data.type = this.type
				}
				if(this.sid !== ''){
					data.sid = this.sid
				}
				if(this.correct_state !== '' ) {
					data.correct_state = this.correct_state
				}
				
				// 获取练习列表
				// 文档：https://www.showdoc.cc/416494108281686?page_id=2524126529199057
				this.$zapi.apiPost('user/Grade.Stuhomework/gethomeworklist', data).then(res => {
					if(res.data.code == 200) {
						let homeworkList = res.data.data.data
						homeworkList.forEach((item, index) => {
							item.start_time = util.getFormatTime(item.start_time)
							item.end_time = util.getFormatTime(item.end_time)
						})
						this.mockList = this.reload ? homeworkList : this.mockList.concat(homeworkList);
						this.reload = false;
						this.status='more';
					} else {
						if(this.reload){
							this.mockList = [];
						}else{
							this.status='noMore';	
						}
					}
				})
			},
			changeSubject(subject, sid, index) {
				this.currectSubject = index
				this.leftNavExhibition = subject
				this.sid = sid
				this.page = 1;
				this.reload = true;
				this.requData()
			},
			changeCurrectStatus(title,status,index) {
				this.correctStatus = index
				this.correct_state = status
				this.rightNavExhibition = title
				this.page = 1;
				this.reload = true;
				this.requData();
			},
			activeTab(index) {
				if (this.tabSwitch === 999) {
					this.tabSwitch = index
					if (index == 0) {
						this.con1Switch = true
					} 
					if (index == 1) {
						this.con2Switch = true
					}
					return
				}
				this.closeAll()
			},
			closeAll() {
				this.con1Switch = false
				this.con2Switch = false
				this.tabSwitch = 999
			}
		}
	}
</script>

<style scoped>
	.medal-wrap{display: flex;}
	.speed{color:#FF7171; font-size:46upx;font-weight: 100;margin-left: 40upx;}
	.greater{color:#FF9900; font-size:46upx;font-weight: 100;margin-left: 10upx;}
	
	.component-box {
		display: flex;
		align-items: center;
		width: 750upx;
		height: 93upx;
		border-bottom: 1px solid #E5E5E5;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 38upx;
		border-right: 1px solid #E5E5E5;
	}

	.item-title {
		color: #333333;
		font-size: 36upx;
		transition: all .3s;
	}

	.active-item-title {
		color: #FF9900;
	}

	.item:last-child {
		border: none;
	}

	.before {
		font-size: 48upx;
		color: #0D0408;
		margin-right: 20upx;
	}

	.active-before {
		color: #FF9900;
	}

	.icon-styl {
		font-size: 48upx;
		color: #0D0408;
		transform: rotate(90deg);
		transition: all .3s;
		margin-left: 60upx;
	}

	.active-icon-styl {
		color: #FF9900;
		transform: rotate(-90deg);
	}

	.pop-bg {
		position: fixed;
		width: 100%;
		height: calc(100% - 80upx);
		top: 90upx;
		z-index: 600;
		background-color: rgba(0, 0, 0, .3);
		/* transition: opacity 5s; */
	}

	.bg-con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 93upx;
		padding-left: 30upx;
		padding-right: 30upx;
		border-bottom: 1px solid #E5E5E5;
		background-color: #ffffff;
	}

	.bg-con1:first-child {
		border-top: 1px solid #E5E5E5;
	}

	.opi-styl {
		color: #333333;
		font-size: 34upx;
	}

	.active-opi-styl {
		color: #FF9900;
	}

	.gougou-styl {
		color: #FF9900;
		font-size: 45upx;
	}

	.scroll_content {
		height: calc(100% - 100upx);
		background-color: #eeeeee;
	}

	.which_status:before {
		display: inline-block;
		position: absolute;
		text-align: center;
		width: 200upx;
		height: 50upx;
		color: #ffffff;
		transform: rotate(-45deg) translate(-60upx, -25upx);
	}

	.which_status_type1:before {
		content: "未批改";
		background-color: #00ACFE;
	}

	.which_status_type2:before {
		content: "已完成";
		background-color: #00D5A2;
	}

	.which_status_type3:before {
		content: "未完成";
		background-color: #FF9900;
	}
	.which_status_type4:before{
		content: "已超时";
		background-color: #FF7171;
	}
	.package {
		position: relative;
		margin-top: 20upx;
		background-color: #ffffff;
		overflow: hidden;
	}

	.grid_item {
		padding: 0 30upx;
	}

	.grid_r1 {
		font-weight: bold;
		font-size: 36upx;
		height: 92upx;
		line-height: 92upx;
		text-align: center;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	.grid_r1 text{
		max-width: 80%;
		margin-left: 30upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.grid_r1 .abridge{
		width: 28upx;
		height: 28upx;
		padding: 2upx 4upx;
		line-height: 1.1;
		background: #00ACFE;
		color: #FFFFFF;
		border-radius: 8upx;
		margin-left: 18upx;
	}

	.score {
		display: inline-flex;
		float: right;
		font-weight: Regular;
		font-size: 34upx;
		line-height: 72upx;
		color: #666666;
	}

	.grid_r2 {
		font-weight: Regular;
		font-size: 34upx;
		color: #666666;
		height: 72upx;
		line-height: 72upx;
		border-bottom: 1px solid #E5E5E5;
	}

	.grid_r5 {
		display: flex;
		height: 120upx;
		flex-direction: row-reverse;
		align-items: center;
	}
	
	.finish{
		color: #00D5A2;
		font-size: 34upx;
		font-weight: bold;
		height: 100upx;
		line-height: 100upx;
	}

	.btn_item {
		margin-left: 20upx;
		padding: 14upx 26upx;
		text-align: center;
		font-size: 32upx;
		line-height: 34upx;
		color: #FFFFFF;
	}

	.btn_report {
		background-color: #00d555;
	}

	.btn_error {
		background-color: #ff9000;
	}

	.btn_analyse {
		background-color: #00adff;
	}

	.btn_check {
		background-color: #005ccc;
	}

	.btn_start {
		background-color: #00ACFE;
	}

	.btn_ing {
		color: #A665FB;
		padding: 0;
	}
	.iconmeishuju{
		color: #FF9900;
		font-size: 400upx;
		display: flex;
		justify-content: center;
		align-content: center;
	}
	.empty_text{
		font-size: 38upx;
		color: #999999;
		text-align: center;
		margin-top: -200upx;
	}
</style>
